.map-navigation-page{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
    overflow: hidden;

    .notice-infos{
		font-size: 26px;
		padding: 0 30px;
		height: 38Px;
		line-height: 38Px;
		background-color: #fff;
		border-bottom: 2px solid #EEEEEE;

		.notice-inner{
			white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;

			.title{
				padding-right: 10px;
			}
		}
	}

    .top-area{
    	position: relative;
    	height: 54Px;

    	.top-header{
		    width: 100%;
		    top: 0;
		    left: 0;
		    background-color: #fff;
	    	box-shadow: 0 4px 14px #e4e4e4;
	    	color: #666;
	    	position: relative;
    		z-index: 2001;

			.nav-menu{
				display: flex;
				padding: 0 24px 0 30px;
				height: 54Px;
	    		line-height: 54Px;

				.navs-block{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
	    			font-size: 30px;

	    			.nav-item{
		    			&.active{
		    				color: #F4A52C;
		    			}
		    		}
				}
				.navs-arrow{
					padding-left: 16px;
				}
			}
		}
		.nav-child{
			position: relative;
		    width: 100%;
		    height: 54Px;
			line-height: 54Px;
		    left: 0;
		    top: -54Px;
		    background: rgba(255, 255, 255, .5);
			overflow: hidden;
			overflow-x: auto;
			font-size: 30px;
			color: #333;
			white-space: nowrap;
			transition: top .3s;
			z-index: 2000;

			&.active{
				top: 0;
			}

			.nc-item{
				display: inline-block;
				padding: 0 30px;

				&.active{
					color: #F4A52C;
				}
			}
		}
		.nav-child-all{
			position: relative;
		    width: 100%;
		    height: 0;
		    background: rgba(255, 255, 255, .5);
			overflow: hidden;
			font-size: 30px;
			color: #333;
			transition: height .3s;
			z-index: 2001;

			&.active{
				height: auto;
				padding: 20px 0;
			}

			.nc-item{
				display: inline-block;
				padding: 10px 20px;

				&.active{
					color: #F4A52C;
				}
			}
		}
    }

    .map-area{
    	position: relative;
    	flex: 1;
    	height: calc(100vh - 54Px);

    	.map-container{
			width: 100vw;
			height: inherit;
		}

		.tools-btn{
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
		    top: 140px;
		    right: 40px;
		    padding: 4px 16px 10px;
		    background-color: #fff;
		    border-radius: 8px;
		    box-shadow: 0 2px 16px #d4d4d4;
		    z-index: 2000;

			.tb-item{
				padding: 10px 0;
				border-bottom: 2px solid #eee;

				&:last-child{
					border-bottom: none;
				}
				.taro-img{
					width: inherit;
	    			height: inherit;
				}
				.tb-img{
					width: 48px;
					height: 48px;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.tb-title{
					font-size: 20px;
					text-align: center;
				}
			}
		}
		.locate-btn{
			display: flex;
		    align-items: center;
		    justify-content: center;
			width: 72px;
		    height: 72px;
		    box-shadow: rgba(107, 120, 137, 0.2) 0 4px 12px 0, rgba(91, 98, 107, 0.08) 0 8px 20px 0;
		    background-color: #fff;
		    cursor: pointer;
		    -webkit-tap-highlight-color: transparent;
		    user-select: none;
		    border-radius: 50%;
		    position: fixed;
		    z-index: 2000;
		    /*bottom: 190px;*/
		    bottom: calc(50px + constant(safe-area-inset-bottom));
		    bottom: calc(50px + env(safe-area-inset-bottom));
		    left: 20px;

		    &:active{
		    	background-color: #f1f1f1;
		    }

		    .taro-img{
		    	height: inherit;
			    width: inherit;
			    display: flex;
			    align-items: center;
			    justify-content: center;
		    }
		    img{
		    	width: 36px;
		    	height: 36px;
		    }
		}
    }

    .detail-layer{
		position: fixed;
		z-index: 2222;
	    background-color: #fff;
	    border-radius: 6Px;
    	box-shadow: 0 4px 30px #a7a7a7;
	    width: 84vw;
	    height: 0;
	    top: 50%;
	    left: 8vw;
	    font-size: 14Px;
	    overflow: hidden;
	    transform: translate(0, -45%);
    	transition: height .5s;

    	&.show{
    		height: 78vh;
    	}

		.dl-title{
			display: flex;
    		align-items: center;
    		padding: 10Px 15Px;
    		font-size: 32px;
    		border-bottom: 2px solid #ececec;

    		.dlt{}
			.dlt-mid{
				flex: 1;
				text-align: center;
			}
			.dlt-right{}
		}
		.dl-cnt{
			position: relative;
			height: 86%;
		    padding: 10Px 15Px 0;
		    overflow: hidden;
		    overflow-y: auto;

			.dlc-img{
				width: 100%;
				/*max-height: 260px;*/
				img{
					object-fit: inherit;
				}
			}
			.dlc-texts{
				margin-top: 15px;
				padding-bottom: 10Px;
			}
		}
	}

	.video-layer{
		position: absolute;
	    z-index: 2001;
	    width: 90vw;
	    height: 0;
	    overflow: hidden;
	    top: 50%;
	    left: -101vw;
	    border: 6Px solid #fff;
	    border-radius: 4Px;
	    transform: translate(-50%, -50%);
	    transition: height .5s;
	    &.show{
	    	left: 50%;
	    	height: 225Px;
	    }
	}

	.menu-navs{
		position: absolute;
	    bottom: 0;
	    width: 90%;
	    left: 5%;
	    z-index: 2009;
	}
}

.list-page{
	background-color: #fff;

	.top-area{
		background-color: #fff;
	    box-shadow: 0 4px 14px #e4e4e4;
	    position: sticky;
    	top: 0;
    	z-index: 1;

		.tabs{
			font-size: 30px;
			overflow: hidden;
		    overflow-x: auto;
		    white-space: nowrap;

			.tab-item{
				display: inline-block;
				text-align: center;
				height: 100px;
    			line-height: 100px;
    			padding: 0 20px;

    			.ti-item{
    				display: inline-block;
    				height: 94px;
    				padding: 0 20px;
    				border-bottom-width: 6px;
    				border-bottom-style: solid;
    				border-bottom-color: #fff;
    				transition: border-bottom-color .3s;
    			}

    			&.active{
    				.ti-item{
    					border-bottom-color: #F4A52C;
    				}
    			}
			}
		}
		/*临时*/
		.tabs-temp{
			display: flex;
			font-size: 30px;
			overflow: hidden;
		    overflow-x: auto;
		    white-space: nowrap;

			.tab-item{
				flex: 1;
				text-align: center;
				height: 100px;
    			line-height: 100px;

    			.ti-item{
    				display: inline-block;
    				height: 94px;
    				padding: 0 20px;
    				border-bottom-width: 6px;
    				border-bottom-style: solid;
    				border-bottom-color: #fff;
    				transition: border-bottom-color .3s;
    			}

    			&.active{
    				.ti-item{
    					border-bottom-color: #F4A52C;
    				}
    			}
			}
		}
	}
	.list-area{
		padding: 36px 20px;

		.list-item{
			display: flex;
			align-items: center;
		    padding: 20px 30px;
		    margin-bottom: 30px;
		    /*background-color: #fff;
		    border-radius: 8px;
		    box-shadow: 0 6px 4px #e8e8e8;*/

		    &:last-child{
		    	margin-bottom: 0;
		    }

			.left{
				padding-right: 20px;

				.li-img{
					width: 112px;
    				height: 112px;
    				img{
    					border-radius: 50%;
    				}
				}
				.li-icon{
					width: 50px;
					height: 50px;
					display: block;
				}
			}
			.right{
				flex: 1;
				color: #999;
    			font-size: 26px;

				.title-box{
					display: flex;
					align-items: center;
					/*margin-bottom: 14px;*/

					.title{
						flex: 1;
						font-size: 32px;
					    color: #333;
					    margin-top: -2px;
					}
					.distance{}
				}
				.intro{
					overflow:hidden; 
					text-overflow:ellipsis;
					display:-webkit-box; 
					autoprefixer: off;
					-webkit-box-orient:vertical; 
					autoprefixer: on;
					-webkit-line-clamp:2; 
					line-height: 36px;
				}
			}
		}
		.empty-list{
			position: relative;
			color: #999;
		    font-size: 30px;
		    height: 40px;
		    text-align: center;
		    width: 80%;
    		margin: 60px auto 0;

		    &:after{
		    	content: "";
			    border-top: 0.02133rem solid #ddd;
			    position: absolute;
			    width: 100%;
			    left: 0;
			    top: 22px;
		    }
		    .empty-text{
		    	position: relative;
		    	background-color: #F3F3F3;
		    	padding: 0 16px;
			    z-index: 1;
		    }
		}
	}
}

.inner-navigate-page{
	display: flex;
	flex-direction: column;
	height: 100vh;
    background-color: #fff;
    overflow: hidden;
    font-size: 30px;

	.search-area{
		padding: 40px 30px;

		.sa-item{
			display: flex;
    		align-items: center;
    		margin-bottom: 24px;

			.sai-label{
				color: #999;
				padding-right: 20px;
			}
			.sai-ipt{
				flex: 1;
    			display: flex;
    			background-color: #EDF0FA;
			    padding: 20px 24px;
			    border-radius: 6px;

				.sai-name{
					flex: 1;
					background-color: transparent;
    				padding: 0;
    				margin: 0 20px 0 0;
				}

				.at-input::after{
					border: none;
				}
			}
		}
		.sa-btn{
			background-color: #FF9C25;
			color: #fff;
		    text-align: center;
		    padding: 30px 0;
		    font-weight: bold;
		    letter-spacing: 10px;
		    border-radius: 12px;
		    margin-top: 36px;
		}
	}
	.list-area{
		flex: 1;
		padding: 0 30px;
		overflow: hidden;
    	overflow-y: auto;

		.la-item{
			display: flex;
			align-items: center;
			margin-bottom: 40px;

			.left-img{
				width: 50px;
				height: 50px;
				padding-right: 20px;

				.lai-img{
					width: 100%;
					height: 100%;

					img{
						width: 100%;
						height: 100%;
					}
				}
			}
			.right-scenic{
				flex: 1;
				display: flex;
				align-items: center;

				.title{
					flex: 1;
				}
				.btn-cmn{
					color: #fff;
				    font-size: 24px;
				    padding: 6px 20px;
				    border-radius: 6px;
				    margin-left: 20px;
				}
				.start-btn{
					background-color: #69C745;
				}
				.end-btn{
					background-color: #FF6164;
				}
			}
		}
	}
}